@import '../../../style/theme/index';

@mi-layout: ~'@{mi-prefix}layout';
@mi-history: ~'@{mi-layout}-history';

.@{mi-history} {
    position: fixed;
    top: @mi-header-height + 3.5rem;
    left: @mi-sider-width;
    background: var(--mi-history-bg-color, @mi-history-bg-color);
    .properties(padding-left, 24);
    .properties(padding-bottom);
    .properties(padding-top);
    .properties(right, 0);
    .flex(center, flex-start);
    transition: all .3s ease-in-out;
    z-index: 19900302;

    &-btn {
        .properties(width, 32);
        .properties(height, 32);
        .flex();
        cursor: pointer;

        &&.disabled {
            cursor: not-allowed;
        }

        .anticon {
            .properties(font-size, 14);
            .properties(width, 32);
            .properties(height, 32);
            .flex();
            color: var(--mi-history-item-text-color, @mi-history-item-text-color);
        }
    }

    &-list {
        width: 100%;
        overflow: hidden;
    }

    &-list,
    &-items {
        .flex(center, flex-start);
    }

    &-items {
        transform: translateX(0);
        transition: all .3s ease-in-out;
    }

    &-item {
        .properties(height, 32);
        background:var(--mi-history-item-bg-color, @mi-history-item-bg-color);
        .flex();
        .properties(padding-left, 16);
        .properties(padding-right);
        color: var(--mi-history-item-text-color, @mi-history-item-text-color);
        .properties(margin-right);
        .properties(font-size, 14);
        .border-radius();
        .text-ellipsis();
        cursor: pointer;

        span {
            .properties(margin-right, 8);
            .properties(font-size, 12);

            &:last-child {
                margin-right: 0;
            }
        }

        &&.active {
            color: var(--mi-theme-color, @mi-theme-color);
        }

        &:last-child {
            margin-right: 0;
        }
    }

    &-menu {
        .properties(width, 32);
        .properties(height, 32);
        .border-radius();
        .properties(margin-right);
        .properties(margin-left);
        background: var(--mi-history-item-bg-color, @mi-history-item-bg-color);
        .flex();
        cursor: pointer;
        
        .anticon {
            .flex();
            .properties(font-size, 14);
            .properties(width, 32);
            .properties(height, 32);
            color: var(--mi-history-item-text-color, @mi-history-item-text-color);
        }
    }

    &&-btn-disabled {
        .properties(padding-left, 32);

        .@{mi-history} {
            &-btn {
                display: none;
            }
        }
    }
}

.ant-layout-sider {
    &-collapsed {
        && + .@{mi-layout} {
            &-container {
                .@{mi-layout} {
                    &-history {
                        .properties(left, 80);
                    }
                }
            }
        }
    }
}